<template>
    <div class="com_con">
        <h4>发表评论</h4>
        <hr>
        <textarea v-model="msg" placeholder="请输入要BB的内容(最多BB120个字)" maxlength="120"></textarea>
        <mt-button size="large" type="primary" @click="postComment">发表评论</mt-button>
        <div class="content">
            <div class="all" v-for="(item, i) in commont" :key="i">
                <div class="c_title">
                    第{{i+1}}楼&nbsp;用户:{{item.user_name}}&nbsp;发表时间:{{item.add_time |timeFil}}
                </div>
                <div class="c_body">
                    {{item.content==""||item.content=="undefined"?"此用户什么都没留下":item.content}}
                </div>
            </div>
        </div>
        <mt-button plain  size="large" type="danger" @click="jiazai">加载更多</mt-button>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    export default {
        data () {
            return {
                pageindex:1,
                commont:[],
                msg:""
            }
        },
        created () {
            this.getcomments()
        },
        methods: {
            getcomments(){
                this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageindex).then(res=>{
                    console.log(res.body.message);
                    this.commont = this.commont.concat(res.body.message);
                });
            },
            jiazai(){
                this.pageindex++;
                this.getcomments();
            },
            postComment(){
                if(this.msg.trim().length==""){
                   return Toast("内容不能为空！")
                }
                this.$http.post('api/postcomment/'+this.id,{
                    content:this.msg.trim()
                }).then(res=>{
                    if(res.body.status==0){
                        var arr_con = {
                            user_name : "匿名用户",
                            add_time: new Date(),
                            content:this.msg.trim()
                        }
                        this.commont.unshift(arr_con);
                        this.msg = "";
                        Toast(res.body.message)
                    }
                    
                });
            }
        },
        props: ['id']
    }
</script>

<style lang="scss" scoped>
.com_con{
    textarea{
        font-size: 14px;
        margin-top: 0;
    }
    button{
        margin-bottom: 8px;
    }
    .content{
        .c_title{
            padding: 8px 2px;
            font-size: 14px;
            background-color: #bbb;
        }
        .c_body{
            padding: 8px 2px;
            font-size: 14px;
            word-break: break-all;
        }
    }
}
</style>